import {Circle as CircleStyle, Fill, Icon, Stroke, Style, Text} from "ol/style";
import {v4 as uuidv4} from "uuid";
import Overlay from "ol/Overlay";

export default {
  name: '接收数据',
  data() {
    return {
      iconImg: ''
      // markerStyle: new Style({
      //   image: new Icon({
      //     anchor: [0.5, 0.5],
      //     anchorOrigin: 'bottom-right',
      //     anchorXUnits: 'fraction',
      //     anchorYUnits: 'pixels',
      //     offsetOrigin: 'top-left',
      //     src: '',
      //     scale: 1,
      //     offset: [0, 0]
      //   }),
      //   text: new Text({
      //     text: '',
      //     offsetY: -40,
      //     offsetX: 15,
      //     scale: 0.8,
      //     font: '12px Microsoft YaHei',
      //     fill: new Fill({
      //       color: '#fff'
      //     })
      //   })
      // })
    }
  },
  methods: {


    /**
     * 更新最新位置
     */
    updatePoliceMarker(options) {
      let {
        feature: featureItem,
        data: item,
        layerId: layerId,
        layer: layer,
        showInfo: showInfo
      } = options
      this.zIndex++
      if (showInfo) {
        let data = featureItem.get('data')
        let coordinate = this.gisIns.transform(data.lng, data.lat)
        featureItem.getGeometry().setCoordinates(coordinate)
        // 显示弹窗
        this.gisIns.openOverLay('policeInfoWin', coordinate);
        this.map.getOverlayById('policeInfoWin').setOffset([20, -50])
        // 切换中心点
        this.toMapCenter(coordinate)
      } else {
        // 最新坐标
        let oldp = featureItem.getGeometry().getCoordinates()
        let newp = this.gisIns.transform(Number(item.lng), Number(item.lat))
        if (this.timers[`${item.stationNum}`] && this.timers[`${item.stationNum}`]['timer']) {
          clearInterval(this.timers[`${item.stationNum}`]['timer']);
        }
        this.timers[`${item.stationNum}`] = {
          index: 0,
          points: [],
          timer: null
        }
        this.timers[`${item.stationNum}`]['index'] = 0
        this.timers[`${item.stationNum}`]['points'] = [oldp, newp]
        this.timers[`${item.stationNum}`]['timer'] = setInterval(() => {
          if (this.timers[`${item.stationNum}`]['index'] + 1 >= this.timers[`${item.stationNum}`]['points'].length) {
            clearInterval(this.timers[`${item.stationNum}`]['timer']);
            delete this.timers[`${item.stationNum}`]
            return;
          }
          // 到转折点旋转角度
          if (this.nextPoint(item.stationNum) === this.timers[`${item.stationNum}`]['points'][this.timers[`${item.stationNum}`]['index'] + 1]) {
            this.timers[`${item.stationNum}`]['index']++;
          }
          //改变坐标点
          let coordinate = this.timers[`${item.stationNum}`]['points'][this.timers[`${item.stationNum}`]['index']]
          featureItem.getGeometry().setCoordinates(coordinate)
        }, 10);
      }

      // 设置新图标
      // 显示在最高层
      // 添加图标（选中图标）
      let newItem = {}
      if (showInfo) {
        newItem = {
          ...featureItem.values_.data
        }
      } else {
        newItem = {
          ...item
        }
      }
      featureItem.set('data', {
        ...newItem,
        bdBusinessOrganizeName: newItem.bdBusinessOrganizeName,
        lng: newItem.lng,
        lat: newItem.lat,
      })
      featureItem.setStyle((resolution) => {
        return new Style({
          image: new Icon({
            src: this.$mapicon.policeHeadMarkerMoveIcon,
            scale: 0.5,
            offset: [0, 0],
            anchor: [0.5, 0.5],
            anchorOrigin: 'bottom-right',
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            offsetOrigin: 'top-left',
          }),
          text: new Text({
            text: newItem.name,
            offsetY: -25,
            offsetX: 0,
            scale: 1,
            font: '12px Microsoft YaHei',
            fill: new Fill({
              color: '#edeb17'
            })
          }),
          zIndex: this.zIndex
        });
      });
    },
    nextPoint(key) {
      let index = this.timers[`${key}`]['index'];
      // 获取在屏幕的像素位置
      // 将点击要素（t点）的地理坐标转换为屏幕像素坐标
      let p1 = this.map.getPixelFromCoordinate(this.timers[`${key}`]['points'][index]);
      let p2 = this.map.getPixelFromCoordinate(this.timers[`${key}`]['points'][index + 1]);
      if (!p1 || !p2) {
        return this.timers[`${key}`]['points'][index + 1]
      }

      let dx = p2[0] - p1[0];
      let dy = p2[1] - p1[1];
      // 打印可见  在没有走到下一个点之前，下一个点是不变的，前一个点以这个点为终点向其靠近
      let distance = Math.sqrt(dx * dx + dy * dy)
      // console.log(distance)
      if (distance <= 1) {
        return this.timers[`${key}`]['points'][index + 1];
      } else {
        let x = p1[0] + dx / distance;
        let y = p1[1] + dy / distance;
        // 将px坐标转经纬度
        let coor = this.map.getCoordinateFromPixel([x, y]);
        // 这里会将前一个点重新赋值  要素利用这个坐标变化进行移动
        this.timers[`${key}`]['points'][index] = coor;
        return this.timers[`${key}`]['points'][index];
      }
    }
  }
}
